<script setup>
import { ref } from 'vue';
let props = defineProps({
    control: Object,
    model: Object,
})
const showPicker = ref(false);
const onConfirm = (value) => {
    let data = dateFormat(props.control.props.format, value);

    props.model[props.control.id] = data;
    showPicker.value = false;
};
function dateFormat(fmt, date) {
    let ret;
    const opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "M+": (date.getMonth() + 1).toString(),     // 月
        "D+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "m+": date.getMinutes().toString(),         // 分
        "s+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
    };
    for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
    };
    return fmt;
}
</script>

<template>
    <van-field
        v-model="model[control.id]"
        is-link
        readonly
        :name="control.id"
        :label="control.props.label"
        :placeholder="control.props.placeholder"
        @click="showPicker = true"
        :clearable="control.props.clearable"
        :disabled="control.props.disabled"
        :readonly="control.props.readonly"
        :rules="control.rules"
        :required="control.rules[0].required"
    />
    <van-popup v-model:show="showPicker" position="bottom">
        <van-datetime-picker
            :type="control.props.type"
            @confirm="onConfirm"
            @cancel="showPicker = false"
        />
    </van-popup>
</template>
